<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
    <div class="execution">
        <basic-container>
            <template>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <div class="blank">
                        <div class="title"><h3><span class="title-text">|</span> 基本信息</h3></div>
                    </div>
                    <el-form-item label=" 员工名称" size="small" prop="name">
                        <el-input v-model="ruleForm.name" class="input"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="商家名称" size="small" required>-->
                    <!--<el-input v-model="ruleForm.merchantName" class="input"></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="手机号码" size="small" prop="telephone">
                        <el-input v-model="ruleForm.telephone" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="采购商类型">
                        <el-radio-group v-model="ruleForm.purchaseEmployeeType">
                            <el-radio
                                    v-for="item in employeeTypeDict"
                                    :key="item.value"
                                    :label="item.value">{{item.label}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="启用状态">
                        <el-radio-group v-model="ruleForm.useStatus">
                            <el-radio
                                    v-for="item in useStatusDict"
                                    :key="item.value"
                                    :label="item.value">{{item.label}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="background" @change="enabledBackground">后台启用</el-checkbox>
                        <el-checkbox v-model="openApp" @change="enabledApp">小程序启用</el-checkbox>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm" v-show="submitBtnFlag">保存</el-button>
                        <el-button @click="resetForm">取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </basic-container>
    </div>
</template>

<script>
    import {addEmployee, modifyEmployee} from "../../../../api/scm/purchase/purchase_employee";
    import {fetchDict} from '@/util/util';
    import {fetchUid, fetchUserId} from '@/api/manage/upassport';
    import Util from '@/util/pds/utils';
    import {getStore, setStore} from "@/util/store";
    let util = new Util();

    export default {
        data() {
            return {
                ruleForm: {
                    id: '',
                    pmId: '',
                    passportId: '',
                    userId: '',
                    name: '',
                    telephone: '',
                    purchaseEmployeeType: '3',
                    useStatus: '1',
                    remarks: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                    telephone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {min: 11, max: 20, message: '长度为 11 个字符', trigger: 'blur'}
                    ],
                },
                // 绑定功能
                openApp: false,
                background: false,
                // 字典
                employeeTypeDict: [],
                useStatusDict: [],
                // 按钮
                submitBtnFlag: true
            };
        },
        created() {
            // 字典初始化
            fetchDict('scm_purchase_employee_type', this.employeeTypeDict);
            fetchDict('scm_use_status', this.useStatusDict);
            if (this.$route.query.id) {
                this.ruleForm = this.$route.query;
                let passport = this.$route.query.passportId;
                let userId = this.$route.query.userId;
                if (passport) {
                    this.openApp = true;
                }
                if (userId) {
                    this.background = true;
                }
            }
            // 默认值
            this.ruleForm.pmId = getStore({name: "pmId"});
        },
        methods: {
            submitForm() {
                this.submitBtnFlag = false;
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        if (!this.ruleForm.id) {
                            addEmployee(this.ruleForm).then(res => {
                                if (res.data.code === 0) {
                                    this.$message.success("添加成功")
                                    this.ruleForm = res.data.data;
                                } else {
                                    this.$message.error("添加失败")
                                    this.submitBtnFlag = true;
                                }
                            })
                        } else {
                            modifyEmployee(this.ruleForm).then(res => {
                                if (res.data.data === true) {
                                    this.$message.success("提交成功")
                                } else {
                                    this.$message.error("提交失败")
                                    this.submitBtnFlag = true;
                                }
                            })
                        }
                    } else {
                        this.$message.warning("必填信息未完成");
                        this.submitBtnFlag = true;
                    }
                });
            },
            resetForm() {
                this.$router.go(-1);
            },
            // 绑定uid
            enabledApp() {
                if (!this.openApp) {
                    this.ruleForm.passportId = '';
                } else if (this.ruleForm.telephone) {
                    this.ruleForm.passportId = '';
                    fetchUid({
                        'telephone': this.ruleForm.telephone
                    }).then(res => {
                        if (res.data.code === 0) {
                            this.ruleForm.passportId = res.data.data;
                        }
                    }).catch(e => {
                        this.openApp = false;
                        this.$message.warning("启用失败!找不到对应的通行证");
                    });
                } else {
                    this.openApp = false;
                    this.ruleForm.passportId = '';
                    this.$message.warning("请填写手机号码！")
                }
            },
            // 绑定 系统用户
            enabledBackground() {
                if (!this.background) {
                    this.ruleForm.userId = '';
                } else if (this.ruleForm.telephone) {
                    this.ruleForm.userId = '';
                    fetchUserId({
                        'telephone': this.ruleForm.telephone
                    }).then(res => {
                        if (res.data.code === 0) {
                            this.ruleForm.userId = res.data.data;
                        }
                    }).catch(e => {
                        this.background = false;
                        this.$message.warning("启用失败!找不到对应的用户");
                    });
                } else {
                    this.background = false;
                    this.ruleForm.userId = '';
                    this.$message.warning("请填写手机号码！")
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .input {
        width: 30%;
    }

    .title {
        width: 100px;
        text-align: right;
    }

    .title-text {
        color: deepskyblue;
    }

    .blank {
        border-bottom: 1px solid #f0f0f0;
        height: 30px;
        margin-bottom: 10px;
    }


</style>
